<template>
  <div class="bff">
    <div class="bff_box">
      <div class="first_item odd" :class="{next: isNext}" @click="pageTurn">
        AASDFS
      </div>
      <div class="first_item even" :class="{next: isNext}" @click="pageTurn">
        666
      </div>
    </div>
  </div> 
</template>

<script>
export default {
  name: "Fanshu",
  props: {
  },
  data() {
    return {
      isNext: false
    }
  },
  computed: {
  },
  methods: {
    pageTurn() {
      this.isNext = !this.isNext;
    }
  }
}
</script>

<style lang="scss" scoped>
.bff{
  width: 700px;
  height: 460px;
  margin: 100px;
  .bff_box{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 50%);
    position: relative;
    perspective: 700px;
    transform-style: preserve-3d;
    .first_item{
      width: calc(50% - 40px);
      height: calc(100% - 40px);
      position: absolute;
      left: 0;
      padding: 20px;
      box-shadow: inset 0px 0 30px 0px rgb(36 10 3 / 50%), -2px 0 5px 2px rgb(0 0 0 / 40%);
      overflow: hidden;
      z-index: 1;
      transition: all 2s;
      background-color: #e3d0b5;
      color: #785e3a;
      border: solid 1px #998466;
      backface-visibility: hidden;
      &.odd{
        transform-origin: left;
        transform: translateX(350px) rotateY(0deg);
        z-index: 2;
        // clip-path:polygon(0px 100px,0px 460px,350px 460px,350px 0px,100px 0px);
        &.next{
          transform: translateX(350px) rotateY(-180deg);
        }
      }
      &.even{
        z-index: 1;
        transform-origin: right;
        transform: translateX(0px) rotateY(180deg);
        &.next{ 
          transform: translateX(0px) rotateY(0deg);
        }
      }
    }
  }
}
</style>